@layer components {
  .Header {
    @apply text-md;
    position: absolute;
    left: 0;
    top: 0;
    height: var(--header-height);
    width: 100%;
  }

  .HeaderInner {
    height: inherit;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1.5rem;

    position: fixed;
    top: 0;
    inset-inline: 0;
    box-shadow: inset 0 -1px var(--color-gridline);
    /* It's also the iOS header overscroll background */
    background-color: var(--color-gray-50);
    z-index: 1;

    @media (--show-side-nav) {
      position: static;
      box-shadow: none;
      background-color: transparent;
    }
  }

  .HeaderLink,
  .HeaderButton {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;
    border-radius: var(--radius-md);

    @media not (hover: hover) {
      &:active {
        color: var(--color-gray-500);
      }
    }

    &:focus-visible {
      z-index: 1;
      outline: 2px solid var(--color-blue);
      outline-offset: -2px;
    }

    & > * {
      flex-shrink: 0;
    }
  }

  .HeaderButton {
    @media (hover: hover) {
      &:hover {
        background-color: var(--color-gray-100);
      }
    }

    @media not (hover: hover) {
      &:active {
        background-color: var(--color-gray-100);
      }
    }
  }

  .HeaderLink {
    @media (hover: hover) {
      &:hover {
        text-decoration: underline;
        text-decoration-color: var(--color-gray-500);
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
      }
    }
  }

  .HeaderLogoLink {
    display: flex;
    padding: 0.25rem 0.5rem;
    margin: -0.25rem -0.5rem;

    &:active {
      color: var(--color-gray-500);
    }

    & svg {
      margin-top: -0.125rem;
    }

    &:focus-visible {
      border-radius: var(--radius-md);
      outline: 2px solid var(--color-blue);
      outline-offset: -1px;
    }
  }
}
